<template>
    <header class="kayden-header sticky-top">
        <div class="header-inside transparent_header">
            <div class="d-flex flex-row justify-content-between align-items-center">
                <!--Header Toggler START-->
                <div class="kayden-menu-toggler"><a class="kayden-toggler text-reset" data-bs-toggle="offcanvas"
                        href="#kaydenOffCanvas" role="button" aria-controls="kaydenOffCanvas">
                        <div class="kt-r"><span></span><span></span><span></span></div>
                        <div class="kt-t">MENU </div>
                    </a></div>
                <!--Header Toggler END-->
                <!--Header Logo START-->
                <!-- <div class="kayden-logo"><a href="#"><img src="assets/images/logo.4e6e885f.png" height="30" alt="StoneDao"></a></div>  -->
                <!--Header Logo END-->
                <!--Header Info START-->
                <div class="kayden-nav-meta fs-5 fw-bold d-none d-sm-block text-end"><a href="#" class="text-reset"></a>
                </div>
                <!--Header Info END-->
            </div>
        </div>
    </header>
    <div class="offcanvas offcanvas-start" id="kaydenOffCanvas">
        <!--Off Canvas Header START-->
        <div class="offcanvas-header">
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"><i
                    class="fas fa-times"></i></button>
        </div>
        <!--Off Canvas Header END-->
        <!--Off Canvas Body START-->
        <div class="offcanvas-body">
            <div class="kayden-offcanvas-nav-container d-flex flex-column justify-content-center align-items-center">
                <!--Off Canvas Navigation START-->
                <ul class="kayden-offcanvas-nav list-inline">
                    <li class="py-3"><a href="#home"
                            class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold"
                            data-bs-dismiss="offcanvas">Home</a></li>
                    <li class="py-3"><a href="#yuanjing"
                            class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold"
                            data-bs-dismiss="offcanvas">Our message</a></li>
                    <li class="py-3"><a href="#Individual items"
                            class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold"
                            data-bs-dismiss="offcanvas">Individual items</a></li>
                    <li class="py-3"><a href="#faq"
                            class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold"
                            data-bs-dismiss="offcanvas">FAQ</a></li>
                    <li class="py-3"><a href="./StoneDaoWhitepaper.pdf"
                            class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold"
                            data-bs-dismiss="offcanvas">White Book</a></li>
                    <li class="py-3"><a href="#contact"
                            class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold"
                            data-bs-dismiss="offcanvas">Contact</a></li>
                </ul>
                <!--Off Canvas Navigation END-->
            </div>
        </div>
        <!--Off Canvas Body END-->
    </div>
</template>
  
<script>
export default {
    name: 'myHeader',
}
</script>
<style scoped>
    .offcanvas.show {
        visibility: visible;
    }
</style>